<template>
    <!-- <div class="home-box"> -->
    <ScrollView class="home-box" :option="scrollOptions">
        <div>
            <SwiperView :option="swiperOptions">
                <template v-slot:slide>
                    <div class="swiper-slide">
                        <img src="../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg" />
                    </div>
                </template>
                <template v-slot:pagination>
                    <div class="swiper-pagination"></div>
                </template>
                <template v-slot:navigation>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </template>
            </SwiperView>
            <!-- 商品分类 -->
            <GoodsBar class="goods-box" :list="home.classifyImg"></GoodsBar>
            <!-- 分割线1 -->
            <div class="line-box">
                <img src="../../public/images/line.png">
                <p>超实惠直达</p>
            </div>
            <!-- 实惠直达分类 -->
            <LowerMoney :list="home.lowerMoneyMoudle"></LowerMoney>
            <!-- 分割线2 -->
            <div class="line-box">
                <img src="../../public/images/line.png">
                <p>热门分类</p>
            </div>
            <!-- 热门分类 -->
            <HotBar class="hot-box" :list="home.hotClassifyMoudle"></HotBar>
            <!-- 分割线3 -->
            <div class="line-box">
                <img src="../../public/images/line.png">
                <p>猜你喜欢</p>
            </div>
            <!-- 猜你喜欢分类 -->
            <LikeBar class="like-box" :list="home.thinkYourLikeMoudle"></LikeBar>
            <!-- </div> -->
        </div>
    </ScrollView>
</template>
<script>
import GoodsBar from "../components/goodsBar";
import HotBar from "../components/hotBar";
import LikeBar from "../components/likeBar";
import LowerMoney from "../components/lowerMoney";

import {mapState,mapMutations,mapActions} from "vuex";
export default {
    components: {
        GoodsBar,
        HotBar,
        LikeBar,
        LowerMoney
    },
    data() {
        return {
            scrollOptions: {
                click: true,
                pullDownRefresh:true
            },
            swiperOptions: {
                autoplay: true,
                pagination:{
                    el:".swiper-pagination"
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }
            }
        };
    },
    computed:{
        ...mapState(["home"])
    },
    methods: {
        // ...mapMutations(["setLoopImg"]),
        ...mapActions(["loadImage","loadYourLike"])
    },
    mounted() {
        // console.log(this.$store);
        // this.$store.dispatch("loadImage");//不引用辅助组件mapActions时；
        this.loadImage();//引用辅助组件mapActions时
        // this.$store.commit("setLoopImg",[1,2,3]);//不引用辅助组件mapMutations时
        // this.setLoopImg([1,2,3]);//引用辅助组件mapMutations时
        this.loadYourLike();
    }
};
</script>
<style lang="less" scoped>
//首页样式
.home-box {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 0rem;
    right: 0rem;
    // overflow-y: auto;
}
//商品分类样式
.goods-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
//分割线样式
.line-box {
    text-align: center;
    padding: 0.2rem 0.2rem 0 0.2rem;
    box-sizing: border-box;
    // position: absolute;
    width: 100%;
    height: 0.85rem;
    p {
        position: relative;
        top: -0.45rem;
        left: 0rem;
        font-size: 0.35rem;
        font-weight: bold;
    }
}
//热门分类样式
.hot-box {
    display: flex;
    flex-flow: row wrap;
}
//猜你喜欢分类样式
.like-box {
    display: flex;
    flex-flow: row wrap;
}
</style>